<template>
  <el-button
    v-if="!btnInfo && !id"
    v-bind="$attrs"
    v-on="$attrs"
    :class="border ? `FI-btn__border` : ''"
    @click="handleClick"
  >
    <slot name="prefix"> <i :class="`font_family ${prefixIcon} icon_prefix`" /> </slot>
    <slot><i v-if="iconBtnName" :class="`font_family ${iconBtnName}`" /></slot>
    <slot name="suffix"> <i :class="`font_family ${suffixIcon} icon_suffix`" /> </slot>
  </el-button>
  <!-- 通过id渲染按钮 -->
  <template v-else>
    <template v-if="customType"
      ><el-tooltip v-if="btnInfo?.hasPromession != 1" content="暂无操作权限" placement="top">
        <el-button
          disabled
          v-bind="$attrs"
          v-on="$attrs"
          :id="id"
          :class="border ? `FI-btn__border` : ''"
          @click="handleClick"
        >
          <slot name="prefix">
            <i v-if="prefixIcon" :class="`font_family ${prefixIcon} icon_prefix`" />
          </slot>
          <slot
            ><span v-if="btnInfo?.buttonCname">{{ btnInfo?.buttonCname }}</span>
            <i v-if="!btnInfo?.buttonCname && btnInfo?.uri" :class="`font_family ${btnInfo?.uri}`" />
          </slot>
        </el-button>
      </el-tooltip>
      <el-button v-else v-bind="$attrs" v-on="$attrs" :class="border ? `FI-btn__border` : ''" @click="handleClick">
        <slot name="prefix">
          <i v-if="prefixIcon" :class="`font_family ${prefixIcon} icon_prefix`" />
        </slot>
        <slot
          ><span v-if="btnInfo?.buttonCname">{{ btnInfo?.buttonCname }}</span>
        </slot>
      </el-button>
    </template>
    <template v-else>
      <el-button
        v-if="btnInfo?.hasPromession == 1"
        v-bind="$attrs"
        v-on="$attrs"
        :class="border ? `FI-btn__border` : ''"
        @click="handleClick($event)"
      >
        <slot name="prefix">
          <i v-if="btnInfo?.uri" :class="`font_family ${btnInfo?.uri} icon_prefix`" />
        </slot>
        <slot
          ><span v-if="btnInfo?.buttonCname">{{ btnInfo?.buttonCname }}</span>
          <i v-if="!btnInfo?.buttonCname && btnInfo?.uri" :class="`font_family ${btnInfo?.uri}`" />
        </slot>
      </el-button>
    </template>
  </template>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { usePageStore } from '@/stores/page'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
const props = defineProps({
  // 按钮id pageEname:buttonEname  页面编码:按钮编码
  id: {
    type: String,
    default: '',
  },
  // 左侧按钮图标名称
  prefixIcon: {
    type: String,
    default: '',
  },
  // 右侧侧按钮图标名称
  suffixIcon: {
    type: String,
    default: '',
  },
  // 图标btn
  iconBtnName: {
    type: String,
    default: '',
  },
  // width: {
  //   type: [String, Number],
  //   default: '',
  // },
  // 边框按钮样式
  border: {
    type: Boolean,
    default: false,
  },
  // 自定义按钮类型：当为true时，使用本身按钮定义样式，通过id获取的按钮样式不生效
  customType: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['click'])
const route = useRoute()
// const tempId = `${route.name as string}:${props.id}`
// const tempId = `${route.path}:${props.id}`
const tempId = computed(() => {
  return `${route.name as string}:${props.id}`
})
const pageStore = usePageStore()
const { btnsObj } = storeToRefs(pageStore)

// const btnInfo = ref<Record<string, unknown> | null>(null)
// const customType = computed(() => {
//   // const arr = ['insert', 'save', 'query']
//   // // return arr.some((prefix) => props.id.startsWith(prefix))
//   // return arr.some((prefix) => props.id.endsWith(prefix))
//   return props.customType == 'custom'
// })
const handleClick = (e) => {
  emits('click', e)
}
// const initBtnInfo = (id: string) => {
//   btnInfo.value = btnsObj.value[tempId.value] || null
//   console.log('initBtnInfo----', btnInfo.value, tempId)
// }
const btnInfo = computed(() => {
  return btnsObj.value[tempId.value] || null
})
const getBtnInfo = () => {
  if (props.id) return btnsObj.value[tempId.value]
  else return null
}
const getBtnApiUrl = () => {
  return btnInfo.value?.apiUrl
}

// onMounted(() => {
//   if (props.id) {
//     initBtnInfo(props.id)
//   }
// })
defineExpose({
  getBtnInfo,
  getBtnApiUrl,
  btnInfo,
})
</script>
<style lang="less" scoped>
.icon_prefix {
  margin-right: 4px;
}
.icon_suffix {
  margin-left: 4px;
}
.FI-btn__border {
  background: #ffffff;
  border-radius: 2px;
  color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
  &:hover {
    background: var(--el-color-primary-light-9);
  }
  &:active {
    background: var(--el-color-primary-light-9);
  }
}
</style>
